<template>
  <div>
    <MyTable :list="list" @del="delFn">
      <!-- Tag插槽 -->
      <template v-slot="{ item }">
        <button
          class="addTag"
          v-if="!item.inputVisible"
          @click="showInput(item.id)"
        >
          +tag
        </button>
        <input
          type="text"
          v-else
          v-model="tag"
          @keyup.enter.prevent="closeInput(item.id)"
          v-focus
          class="inputTag"
        />
        <ul>
          <!-- 遍历list里的tags，让tag出现在页面 -->
          <li v-for="(item, index) in item.tags" :key="index" class="tagList">
            {{ item }}
          </li>
        </ul>
      </template>
    </MyTable>
  </div>
</template>

<script>
import MyTable from '../components/MyTable'

export default {
  components: {
    MyTable,
  },
  methods: {
    // 根据 MyTable 传过来的id来删除
    delFn(id) {
      this.list = this.list.filter((item) => item.id !== id)
    },
    // 点击 +tag 按钮显示输入框
    showInput(id) {
      // console.log(id)
      const obj = this.list.find((item) => item.id === id)
      // console.log(obj)
      obj.inputVisible = true
    },
    // input 回车提交时 输入的新tag，并隐藏input,让按钮重新出现
    closeInput(id) {
      // 判断是否为空
      if (!this.tag) {
        return alert('请输入内容')
      } else {
        const obj = this.list.find((item) => item.id === id) //确定是哪一个id的input
        obj.tags.push(this.tag) // 将输入的新tag追加到list里面
        this.tag = '' // 清空输入框
        obj.inputVisible = false // 让按钮重新出现
      }
    },
  },
  directives: {
    // 自定义指令  聚焦
    focus: {
      inserted(el) {
        // console.log(el)
        el.focus()
      },
    },
  },
  data() {
    return {
      list: [
        {
          id: 1,
          goods_name: 'Teenmix/天美意夏季专柜同款金色布女鞋6YF18BT6',
          goods_price: 298,
          tags: ['舒适', '透气'],
          inputVisible: false,
          inputValue: '',
        },
        {
          id: 2,
          goods_name:
            '奥休斯(all shoes) 冬季保暖女士休闲雪地靴 舒适加绒防水短靴 防滑棉鞋子',
          goods_price: 89,
          tags: ['保暖', '防滑'],
          inputVisible: false,
          inputValue: '',
        },
        {
          id: 3,
          goods_name: '初语秋冬新款毛衣女 套头宽松针织衫简约插肩袖上衣',
          goods_price: 199,
          tags: ['秋冬', '毛衣'],
          inputVisible: false,
          inputValue: '',
        },
        {
          id: 4,
          goods_name:
            '佐露絲蕾丝衫女2020春秋装新款大码女装衬衫上衣雪纺衫韩版打底衫长袖',
          goods_price: 19,
          tags: ['雪纺衫', '打底'],
          inputVisible: false,
          inputValue: '',
        },
        {
          id: 5,
          goods_name:
            '熙世界中长款长袖圆领毛衣女2022秋装新款假两件连衣裙女107SL170',
          goods_price: 178,
          tags: ['圆领', '连衣裙'],
          inputVisible: false,
          inputValue: '',
        },
        {
          id: 6,
          goods_name:
            '烟花烫2021秋季装新品女装简约修身显瘦七分袖欧根纱连衣裙 花央',
          goods_price: 282,
          tags: ['秋季新品', '显瘦'],
          inputVisible: false,
          inputValue: '',
        },
        {
          id: 7,
          goods_name:
            '韩都衣舍2021韩版女装秋装新宽松显瘦纯色系带长袖衬衫NG8201',
          goods_price: 128,
          tags: ['韩都衣舍', '长袖衬衫'],
          inputVisible: false,
          inputValue: '',
        },
        {
          id: 8,
          goods_name:
            '预售纤莉秀大码女装胖妹妹秋装2020新款圆领百搭绣花胖mm休闲套头卫衣',
          goods_price: 128,
          tags: ['预售', '卫衣'],
          inputVisible: false,
          inputValue: '',
        },
        {
          id: 9,
          goods_name: '莎密2022夏改良旗袍裙连衣裙修身复古时尚日常短款礼服旗袍',
          goods_price: 128,
          tags: ['莎密', '礼服'],
          inputVisible: false,
          inputValue: '',
        },
        {
          id: 10,
          goods_name: '南极人秋冬韩版七彩棉加绒加厚一体保暖打底裤p7011',
          goods_price: 128,
          tags: ['南极人', '打底裤'],
          inputVisible: false,
          inputValue: '',
        },
      ], // 所有数据
    }
  },
}
</script>
<style lang="less">
.addTag {
  border-radius: 8px;
  background-color: blue;
  color: #fff;
  margin-left: 40px;
  margin-bottom: 15px;
}
.tagList {
  list-style: none;
  display: inline;
  background-color: orange;
  padding: 5px;
  border-radius: 8px;
}
.inputTag {
  margin-left: 40px;
  margin-bottom: 15px;
  border-radius: 5px;
  border-color: orange;
}
</style>
